<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrap-box">
        <!-- 头部banner -->
        <div class="banner-box">
            <div class="nav-box">
                <a class="logo" href="javascript:void(0)"></a>
                <a class="rule" href="javascript:void(0)">活动规则<i class="icon"></i></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="centent-box">

            <!-- 砍价box -->
            <div class="bargain-box">
                <div class="user-box">
                    <!-- 用户信息 -->
                    <div class="user-info">
                        <a class="avatar" href="javascript:void(0)">
                            <img src="./images/avatar.jpg" alt="">
                        </a>
                        <p class="user-name">蔡徐坤</p>
                    </div>

                    <!-- 进度条 -->
                    <div class="progress-box">
                        <div class="text-box">
                            <div class="tuition">学费¥520.00</div>
                            <div class="tuition-ed">学费已刀 <span>¥520.00</span></div>
                        </div>

                        <!-- 进度条 style width 控制进度 -->
                        <div class="progress-bar">
                            <div class="bar" style="width: 60%"></div>
                        </div>


                    </div>
                    <!-- 两组按钮组 分自己 和 他人 -->

                    <!-- 帮他人 -->
                    <div class="action-box">
                        <a class="btn left-btn" href="javascript:void(0)">帮TA补刀</a>
                        <a class="btn right-btn" href="javascript:void(0)">我也要参加</a>
                    </div>

                    <!-- 帮自己 -->
                    <!-- <div class="action-box">
                        <a class="btn left-btn" href="javascript:void(0)">马上开砍</a>
                        <a class="btn right-btn" href="javascript:void(0)">求好友补刀</a>
                    </div> -->
                </div>
            </div>




            <!-- 大侠，其留下你的大宝号 -->
            <div class="contact-box">
                <!-- 地址 -->
                <div class="item-box">
                    <div class="section-box left">
                        省份
                        <select>
                            <option value="" disabled selected style="display:none;">选择省份</option>
                            <option value="">广东省</option>
                            <option value="">黑龙江省</option>
                            <option value="">广西壮族自治区</option>
                        </select>
                    </div>

                    <div class="section-box right">
                        城市
                        <select>
                            <option value="" disabled selected style="display:none;">选择城市</option>
                            <option value="">广州</option>
                        </select>
                    </div>
                </div>

                <!-- 姓名 -->
                <div class="item-box">
                    姓名 <input type="text" placeholder="请输入您的姓名">
                </div>

                <!-- 电话 -->
                <div class="item-box">
                    电话 <input type="text" placeholder="请输入您的联系电话">
                </div>

                <a class="sub-btn" href="javascript:void(0)">召唤好友帮砍价</a>

            </div>



            <!-- 成功榜 -->
            <div class="success-box">
                <ul class="list">
                    <li class="item">
                        <span class="name">蔡徐坤</span>
                        已砍价成功！喜提299元6天全盘账课程！
                    </li>

                    <li class="item">
                        <span class="name">蔡徐坤</span>
                        已砍价成功！喜提299元6天全盘账课程！
                    </li>

                    <li class="item">
                        <span class="name">12</span>
                        已砍价成功！喜提299元6天全盘账课程！
                    </li>

                    <li class="item">
                        <span class="name">西门吹雪</span> 已砍价成功！喜提299元6天全盘账课程！
                    </li>
                </ul>
            </div>


            <!-- 真爱榜  -->
            <div class="love-box">
                <ul class="list">
                    <li class="item">
                        <div class="left">
                            <span class="name">蔡徐坤</span>
                            已为TA刀了<span class="num">55.11</span>元
                        </div>
                        <span class="time">xx天前</span>
                    </li>

                    <li class="item">
                        <div class="left">
                            <span class="name">蔡徐坤</span>
                            已为TA刀了<span class="num">55.11</span>元
                        </div>
                        <span class="time">xx天前</span>
                    </li>

                    <li class="item">
                        <div class="left">
                            <span class="name">蔡徐坤</span>
                            已为TA刀了<span class="num">55.11</span>元
                        </div>
                        <span class="time">xx天前</span>
                    </li>
                </ul>
            </div>



            <div class="other-box">
                <img src="./images/other-box.png" alt="">
            </div>
        </div>

    </div>


    <!-- 规则 模态框 -->
    <div class="modal rule-modal">
        <div class="content-box">
            
            <div class="item">
                <i>1</i> 活动时间：<span>2019年5月20日-5月22日</span>，前520名<br />完成砍价目标，可获得<span>299元</span>优惠报读课程资格；
            </div>

            <div class="item">
                <i>2</i> 参与者填写完个人信息后，将活动页面分享给<br />好友或群聊，邀请好友击帮忙砍价；
            </div>

            <div class="item">
                <i>3</i> 每位好友只可帮忙砍价一次；
            </div>

            <div class="item">
                <i>4</i>
                    前<sapn>520名</span>填满进度条后，即可获得优惠报读课程<br />
                    的资格。如果没有填完整个进度条，则无论已经有<br />
                    多少好友帮忙砍价，均不能获得优惠资格，仍需以<br />
                    原价1380元报读课程；
            </div>

            <div class="item">
                <i>5</i>
                    活动结束后，凭个人微信号及手机号到当地校<br />区进行核销；
            </div>

            <div class="item">
                <i>6</i>
                若发现参与者采用不正当手段砍价刷票，恒企<br />教育有权取消其参与资格。
            </div>
        </div>

        <span class="close-btn"></span>
    </div>


     <!-- 砍价成功 模态框 -->
     <!-- <div class="modal success-modal">
        <div class="content-box">
            <p class="title">恭喜你成功获得 <span>299元</span> 购买课程的资格</p>
            <div class="tips">
                <p class="tit">领取方式</p>
                <div class="text">
                    砍价成功的学员，凭借个人微信号及手<br/>机号到当地校区进行兑换， 详情请咨询<br/>当地校区老师
                </div>
            </div>
           
        </div>

        <span class="close-btn"></span>
    </div> -->


    <!-- 活动结束 模态框 -->
    <!-- <div class="modal end-modal">
        <div class="content-box">
            <p class="title">老铁你来晚一步啦</p>
            <div class="tips">
                <p class="tit">领取方式</p>
                <div class="text">
                    砍价成功的学员，凭借个人微信号及手<br/>机号到当地校区进行兑换， 详情请咨询<br/>当地校区老师
                </div>
            </div>
           
        </div>

        <span class="close-btn"></span>
    </div> -->


    <script src="./js/reset.js"></script>
    <script src="./js/jquery-3.2.0.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>